<template>
  <v-layout title="收款信息预览">

    <el-card>
      <v-table
        :editable="false"
        :default-operate="false"
        :select="false"
        :table-data="tableData"
        :table-title="tableTitle"
        :show-pagination="false"
        btn-class="btn"
      />
      <el-row class="clearfix pdt50 confirm" type="flex" justify="center">
        <el-col :lg="14" :md="16" :sm="20" :xs="24">
          <v-form
            :form-title="confirmTitle"
            :form-data="confirmData"
            label-width="120px"
          />
        </el-col>
      </el-row>
    </el-card>
    <div v-if="messages.length">

      <div class="view">
        开票进度查看：
      </div>

      <v-messageBox
        :messages="messages"
      />

    </div>
    <el-row v-if="financeRole" type="flex" justify="center" class="pdv15">
      <el-col :lg="14" :md="16" :sm="20" :xs="24">
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small" @click="modify"> 修改</el-button>
          <el-button type="primary" v-if="confirmData.cur_status!==4" size="small" @click="check(3)"> 未收款,退回</el-button>
          <el-button type="primary" v-if="confirmData.cur_status!==4" size="small" @click="check(4)"> 确认收款</el-button>
        </el-row>
      </el-col>
    </el-row>

  </v-layout>

</template>

<script>
import auth from '@/mixins/auth'
export default {
  mixins: [auth],
  data() {
    return {
      mp_id: '',
      tableData: [],
      tableTitle: [
        {
          cn: '订单id',
          en: 'ad_id'
        },
        {
          cn: '公众号',
          en: 'name'
        },
        {
          cn: '版位',
          en: 'ad_place_name'
        },
        {
          cn: '广告主',
          en: 'ad_name'
        },
        {
          cn: '发布时间',
          en: 'publish_at'
        },
        {
          cn: '商务负责人',
          en: 'swname'
        },
        {
          cn: '订单金额',
          en: 'ad_price'
        },
        {
          cn: '本次收款金额',
          en: 'money'
        }
      ],

      confirmTitle: [
        {
          cn: '认领人：',
          en: 'name1',
          disabled: true
        },
        {
          cn: '广告主：',
          en: 'ad_name',
          disabled: true
        },
        {
          cn: '汇款账户名：',
          en: 'bank_account',
          disabled: true
        },
        {
          cn: '汇款银行：',
          en: 'bank_name',
          disabled: true
        },
        {
          cn: '汇款时间：',
          en: 'create_date',
          disabled: true
        },
        {
          cn: '收款账户：',
          en: 'accounts',
          disabled: true
        },
        {
          cn: '收款银行：',
          en: 'openbank',
          disabled: true
        },
        {
          cn: '收款金额：',
          en: 'money',
          disabled: true
        },
        {
          cn: '备注：',
          en: 'notes',
          type: 'textarea',
          disabled: true
        }
      ],
      confirmData: {},

      dialogTableVisible: false,
      viewSrc: '',
      messages: []
    }
  },
  activated() {
    this.mp_id = this.$route.query.id
    if (this.mp_id) {
      this.getReconcileInfo()
    }else {
      this.$router.go(-1)
    }
  },
  methods: {
    getReconcileInfo() {
      const data = {
        mp_id: this.mp_id
      }
      this.$get('action/CheckingRequisition/qryOp', data)
        .then(res => {
          this.tableData = res.data.Advs || []
          let confirmData = res.data.checkingrequisition[0] || {};
          confirmData.bank_name = confirmData.adv_bank_info && JSON.parse(confirmData.adv_bank_info).bank_name
          confirmData.bank_account = confirmData.adv_bank_info && JSON.parse(confirmData.adv_bank_info).bank_account
          confirmData.ad_name = this.tableData[0]?this.tableData[0].ad_name:'';
          this.confirmData = confirmData;
          this.messages = res.data.CheckReqLogInfo
        })
    },
    showFile(val) {
      this.viewSrc = val.data
      this.dialogTableVisible = true
    },
    modify() {
      this.$router.push({
        name: 'reconcile_manage.application',
        query: {
          id: this.mp_id
        },
        params: {
          isEdit: 1
        }
      })
    },
    check(status) {
      const data = {
        id: this.mp_id,
        cur_status: status
      }
      this.$post('action/CheckingRequisition/update', data)
        .then(res => {
          new Promise((resolve, reject) => {
            console.log('走了这')
            this.$message({
              message: res.msg,
              type: 'success'
            })
            resolve()
          }).then(_ => this.$router.go(-1))
        })
    }

  }
}
</script>

<style scoped>
    span + button {
        margin-left: 10px;
    }

    .view {
        padding: 15px 0
    }
</style>
